<template>
  <div class="user">
    <img src="/static/images/img/loginBack.png" alt="">
    <div v-if="status" class="login">
      <van-cell-group :border="false">
        <van-field v-model="loginParams.phone" :maxlength="11" type="number" :clearable="true" placeholder="输入手机号">
          <template #left-icon>
            <van-icon class="set_icon" name="phone-o" size="23" />
          </template>
        </van-field>

        <van-field v-model="loginParams.pwd" type="password" :clearable="true" placeholder="输入密码">
          <template #left-icon>
            <van-icon class="set_icon" name="shield-o" size="23" />
          </template>
        </van-field>
      </van-cell-group>
      <div class="login_but">
        <van-button type="primary" round @click="UserLogin">登 录</van-button>
        <div class="reg_tx" @click="status = false">注册账号</div>
      </div>
    </div>
    <div v-else class="reg login">
      <van-cell-group :border="false">
        <van-field v-model="addParams.phone" :clearable="true" :maxlength="11" type="number" placeholder="输入手机号">
          <template #left-icon>
            <van-icon class="set_icon" name="phone-o" size="23" />
          </template>
        </van-field>

        <van-field v-model="addParams.pwd" type="password" :clearable="true" placeholder="输入密码">
          <template #left-icon>
            <van-icon class="set_icon" name="shield-o" size="23" />
          </template>
        </van-field>

        <van-field v-model="addParams.againPwd" type="password" :clearable="true" placeholder="输入确认密码">
          <template #left-icon>
            <van-icon class="set_icon" name="shield-o" size="23" />
          </template>
        </van-field>

      </van-cell-group>
      <div class="login_but">
        <van-button type="primary" round @click="UserAdd">注 册</van-button>
        <div class="reg_tx" @click="status = true">登录账号</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      status: true, // true 登录 false 注册
      loginParams: {
        phone: '15155145354',
        pwd: 'Lb714500.'
      },
      addParams: {
        phone: '15155145354',
        pwd: 'Lb714500.',
        againPwd: 'Lb714500.'
      }
    }
  },
  methods: {
    async UserAdd() {
      if (!this.$utils.isPhone(this.addParams.phone)) {
        this.$toast("手机号不正确")
        return;
      }

      if (!this.$utils.checkPwd(this.addParams.pwd)) {
        this.$toast("密码不符合要求")
        return;
      }

      if (this.addParams.pwd != this.addParams.againPwd) {
        this.$toast("确认密码不符合要求")
        return;
      }

      delete this.addParams.againPwd

      let res = await this.$http.user.add(this.addParams);
      this.$toast({
        message: "恭喜注册成功",
        onClose: () => {
          this.status = true
        }
      })

    },
    async UserLogin() {
      if (!this.$utils.isPhone(this.loginParams.phone)) {
        this.$toast("手机号不正确")
        return;
      }

      if (!this.$utils.checkPwd(this.loginParams.pwd)) {
        this.$toast("密码不符合要求")
        return;
      }

      let userInfo = await this.$http.user.login(this.loginParams);
      this.$utils.setItem("token", userInfo);

      this.$toast({
        message: "恭喜登录成功",
        onClose: () => {
          if (this.$route.query.from) {
            this.$router.push(this.$route.query.from)
          } else {
            this.$router.push("/")
          }
        }
      })


    }
  }
}
</script>



<style scoped lang='less'>
@import "~@less/User";
</style>
